<template>
  <div class="cart">
    <div class="product">
      <div class="product__header">
<!--        <span v-if="allChecked ? '没全选' : '全选'"></span>-->
        <div class="product__header__all" @click="()=>setCartItemsChecked(shopId)">全选</div>
        <div class="product__header__clear" @click="()=>cleanCartProducts(shopId)">清空购物车</div>
      </div>
<!--      这里添加template的目的是为了防止多出一个class-->
      <template v-for="item in productList" :key="item._id">
<!--        在购物车中商品数量小于0，就隐藏商品信息-->
        <div class="product__item" v-if="item.count > 0">
          <div class="product__item__checked" v-html="item.check ? ` <input type='radio'>` : ` <input type='checkbox'>`" @click="()=>changeCartItemChecked(shopId,item._id)">
          </div>
          <img class="product__item__img" :src="item.imgUrl">
          <div class="product__item__detail">
            <h4 class="product__item__title">{{item.name}}</h4>
            <p class="product__item__price">
              <span class="product__item__yen">&yen;</span>{{item.price}}
              <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
            </p>
          </div>
          <div class="product__number">
            <span class="product__number__minus" @click="()=>{changeCartItemInfo(shopId,item._id,item,-1)}">-</span>
              {{item.count || 0}}
            <span class="product__number__plus" @click="()=>{changeCartItemInfo(shopId,item._id,item,1)}">+</span>
          </div>
        </div>
      </template>
    </div>
    <div class="check">
      <div class="check__icon">
        <img src="http://www.dell-lee.com/imgs/vue3/basket.png" class="check__icon__img" />
        <div class="check__icon__tag">{{total}}</div>
      </div>
      <div class="check__info">
        总计：<span class="check__info__price">&yen;{{price.toFixed(2)}}</span>
      </div>
      <div class="check__btn">
        去结算
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useCommonCartEffect } from './commonCartEffect'
import shop from '@/views/shop/Shop.vue'

// 获取购物车信息逻辑
const useCartEffect = (shopId) => {
  const { changeCartItemInfo } = useCommonCartEffect()
  const store = useStore()
  // 购物车中拿到对应的cartList
  const cartList = store.state.cartList
  const total = computed(() => {
    const productList = cartList[shopId]
    let count = 0
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        count += product.count
      }
    }
    return count
  })
  // 总价
  const price = computed(() => {
    const productList = cartList[shopId]
    let count = 0
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        if (product.check) {
          count += (product.count * product.price)
        }
      }
    }
    return count
  })
  // 全选选中
  const allChecked = computed(() => {
    const productList = cartList[shopId]
    let result = true
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        if (product.count > 0 && !product.check) {
          result = false
        }
      }
    }
    return result
  })

  const productList = computed(() => {
    return cartList[shopId] || []
  })
  const changeCartItemChecked = (shopId, productId) => {
    // 改变state里面的值
    store.commit('changeCartItemChecked', { shopId, productId })
  }
  const cleanCartProducts = (shopId) => {
    store.commit('cleanCartProducts', { shopId })
  }
  const setCartItemsChecked = (shopId) => {
    console.log(shopId, '--shopidd')
    store.commit('setCartItemsChecked', { shopId })
  }
  return { cleanCartProducts, setCartItemsChecked, total, price, productList, changeCartItemInfo, allChecked, changeCartItemChecked }
}
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Cart',
  computed: {
    shop () {
      return shop
    }
  },
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { cleanCartProducts, setCartItemsChecked, allChecked, total, price, productList, changeCartItemInfo, changeCartItemChecked } = useCartEffect(shopId)
    return { cleanCartProducts, setCartItemsChecked, allChecked, total, price, productList, shopId, changeCartItemInfo, changeCartItemChecked }
  }
}
</script>

<style lang="scss" scoped>
.cart{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.product{
  overflow-y: scroll;
  background: #fff;
  &__header{
    height: .52rem;
    border-bottom: 1px solid #F1F1F1;
    display: flex;
    line-height: .52rem;
    font-size: .14rem;
    color: #333;
    &__all{
      width: .64rem;
      margin-left: .18rem;
    }
    &__clear{
      flex: 1;
      text-align: right;
      margin-right: .16rem;
    }
  }
  &__item{
    position: relative;
    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    border-bottom: .01rem solid #f1f1f1;
    &__checked{
      color: #0091FF;
      font-size: .2rem;
      line-height: .5rem;
      margin-right: .2rem;
    }
    &__detail{
      overflow: hidden;
    }
    &__img{
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
    }
    &__title{
      line-height: .2rem;
      font-size: .14rem;
      color: #333;
      margin: 0;
    }
    &__price{
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: #E93B3B;
    }
    &__yen{
      font-size: .12rem;
    }
    &__origin{
      line-height: .2rem;
      font-size: .12rem;
      color: #333;
      text-decoration: line-through;
    }
    .product__number{
      position: absolute;
      right: 0;
      bottom: .12rem;
      &__minus,&__plus{
        width: .2rem;
        height: .2rem;
        display: inline-block;
        border-radius: 50%;
        line-height: .2rem;
        text-align: center;
        font-size: .2rem;
      }
      &__minus{
        border:.01rem solid #666 ;
        color: #666;
        margin-right: .05rem;
      }
      &__plus{
        background: #0091FF;
        color: #fff;
        margin-left: .05rem;
      }
    }
  }
}
.check{
  display: flex;
  height: .49rem;
  border-top: .01rem solid #F1F1F1;
  line-height: .49rem;
  &__icon{
    width: .84rem;
    position: relative;
    &__img{
      width: .28rem;
      height: .26rem;
      display: block;
      margin: .12rem auto;
    }
    &__tag{
      position: absolute;
      min-width: .2rem;
      height: .2rem;
      background-color: #E93B3B;
      border-radius: .1rem;
      padding: 0 .04rem;
      line-height: .2rem;
      font-size: .12rem;
      text-align: center;
      left: .3rem;
      top: .04rem;
      color: #FFF;
      transform: scale(.5);
      transform-origin:left center;
    }
  }
  &__info{
    flex: 1;
    color: #333;
    font-size: .12rem;
    &__price{
      color: #E93B3B;
      font-size: .18rem;
    }
  }
  &__btn{
    width: .98rem;
    background-color: #4FB0F9;
    color: white;
    font-size: .14rem;
    text-align: center;
  }
}
</style>
